<template>
    <div class="Examine_Root">
        <!-- <Manuscript v-for="item in videoData" :key="item.id" :id="item.id" :title="item.name"
            :videoPoster="item.posterSource" :videoUrl="item.videoSource" :date="item.createTime" :author="item.uid"
            :subscribe="item.details" :partition="item.type" @PlayerVideo="VideoPlay" @Accept="AcceptUE"
            @Reject="RejectUE">
        </Manuscript> -->
        <div class="card_grid" v-if="!emptyShow">
            <ManuScriptCard v-for="item in videoData" :key="item.id" :id="item.id" :title="item.name"
                :videoPoster="item.posterSource" :videoUrl="item.videoSource" :date="item.createTime" :author="item.nickname"
                :subscribe="item.details" :partition="item.type" :status="item.status" @PlayerVideo="VideoPlay" @Accept="AcceptUE"
                @Reject="RejectUE">
            </ManuScriptCard>
        </div>
        <el-empty :image-size="200" description="没有可以审核的视频哦" v-else />
        <el-backtop :right="100" :bottom="100" :visibility-height="100" />
    </div>
</template>

<script setup>
import { ref, onMounted, computed, watch } from 'vue'
import Manuscript from '../../components/Manuscript.vue';
import ManuScriptCard from '../../components/ManuScriptCard.vue';
import MyVideo from '../../components/MyVideo.vue';
import { GetWorkInfoList, AuditWork } from '../../Net/netApi.js'
import { ElMessage } from 'element-plus';
import { CustomerConfirm, CustomerMessage } from '../../Util/Confirm.js';
import { UserVideoStore } from '../../stores/videoControl.js'


let videoData = ref([])
let emptyShow = ref(true)
let currentShowType = ref(0)
const videoStore=UserVideoStore()

onMounted(() => {
    GetAllWorkList()
})

//TODO:如果出现问题请查看这里
//监听videoData，控制页面刷新
watch(videoData, (newValue, oldValue) => {
    if (newValue != oldValue) {
        videoData.value = newValue
    }
})

const GetAllWorkList = async () => {
    let res = await GetWorkInfoList()
    videoData.value = []
    if (res.code == 200) {
        videoData.value = res.data
    }
    console.log(videoData.value.length)
    if (videoData.value.length > 0) {
        emptyShow.value = false
    }
}


//TODO：控制虚拟列表滚动
const Load = () => {
}

const VideoPlay = (source) => {
    videoStore.PlayVideo(source.videoUrl,source.videoPoster)
}


//交互方法
const AcceptUE = (id) => {
    CustomerConfirm('确定通过审核吗', '提示', '确定', '取消', 'warning',
        () => AcceptManuScript(id), () => CustomerMessage('已取消该操作', 'warning'))
}

const RejectUE = (id) => {
    CustomerConfirm('确定再次驳回稿件吗', '提示', '确定', '取消', 'warning',
        () => RejectManuScript(id), () => CustomerMessage('已取消该操作', 'warning'))
}

const ChangeShowFun = () => {

}

//接口方法
const AcceptManuScript = async (id) => {
    console.log(`该视频${id}已通过审核`)
    let res = await AuditWork(id, 1)
    if (res.code == '200') {
        CustomerMessage('稿件审核通过', 'success', true)
        GetAllWorkList()
    }
}

const RejectManuScript = async (id) => {
    console.log(`该视频${id}已被驳回`)
    let res = await AuditWork(id, 2)
    if (res.code == '200') {
        CustomerMessage('稿件驳回成功', 'success', true)
        GetAllWorkList()
    }
}

</script>

<style lang='less' scoped>
.Examine_Root {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
    scrollbar-width: none;

    .card_grid {
        width: 100%;
        height: 100%;
        padding: 0.5rem;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(calc(15rem), 1fr));
        grid-row-gap: 1rem;
        // TODO:布局出错请找这里
        grid-auto-flow: dense;
    }

    .video_player {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-60%, -60%);
        width: 55vw;
        height: 65vh;

        .video_base {
            width: 100%;
            height: 100%;
        }
    }
}
</style>